<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            border: 1px dotted;
            position: absolute;
            display: none;
        }

        .container{
            width: 500px;
            height: 500px;
            border:1px solid;
            margin: 0 auto;
        }
        /* img{
            width: 100px;
            height: 100px;
            display: block;
        } */
        .myimg{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            background-image: url(./imgs/f.png);
            background-repeat: no-repeat;
            background-size: 100%;
            float: left;
            margin: 5px;
        }
    </style>
</head>
<body>

    <div class="container">
       <div class="myimg"></div>
       <div class="myimg"></div>
       <div class="myimg"></div>
       <div class="myimg"></div>
       <div class="myimg"></div>
       <div class="myimg"></div>
       <div class="myimg"></div>
    </div>

    <script>

        var fEles = document.querySelectorAll(".myimg");


        // 实现拖拽的效果；
        document.onmousedown = function(e){
            var x = e.clientX;
            var y = e.clientY;
            var chioseDivEle = document.createElement("div");
            chioseDivEle.classList.add("box");
            document.body.appendChild(chioseDivEle);
            document.onmousemove = function(e){
                console.log(111);
                var xx = e.clientX;
                var yy = e.clientY;
                chioseDivEle.style.display = "block";
                chioseDivEle.style.left = Math.min(x,xx) + "px";
                chioseDivEle.style.top = Math.min( y,yy) + "px";
                chioseDivEle.style.width = Math.abs(xx - x) + "px";
                chioseDivEle.style.height = Math.abs( yy - y) + "px";

                fEles.forEach(item=>{
                    if(crashFn(item,chioseDivEle)){
                        item.style.backgroundColor = "blue";
                    }else{
                        item.style.backgroundColor = "";
                    }
                })

            }

            document.onmouseup = function(){
                console.log(123);
                document.onmousemove = "";
                chioseDivEle.style.display = "none";
            }
        }



        function crashFn(ele1,ele2){
                var AminX = ele1.offsetLeft;
                var AmaxX = ele1.offsetLeft + ele1.offsetWidth;

                var AminY = ele1.offsetTop;
                var AmaxY = ele1.offsetTop + ele1.offsetHeight;

                var BminX = ele2.offsetLeft;
                var BmaxX = ele2.offsetLeft + ele2.offsetWidth;

                var BminY = ele2.offsetTop;
                var BmaxY = ele2.offsetTop+ ele2.offsetHeight;

                if(AmaxX>=BminX && AminX<=BmaxX && AmaxY>=BminY && AminY<=BmaxY ){
                    // console.log("横轴上碰撞了");
                    return true;
                }else{
                    return false;
                }
        }

    </script>
</body>
</html>